<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <title>个人信息修改</title>
    <link th:href="@{/webjars/jquery.3.4.1/jquery.js}" rel="stylesheet">
    <link th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.css}" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet">
    <link th:href="@{/css/settings.css}" rel="stylesheet" />
    <link th:href="@{/css/head.css}" rel="stylesheet" />
    <link th:href="@{/css/foot.css}" rel="stylesheet" />
    <link th:href="@{/css/setting.css}" rel="stylesheet" />
    <link href="//cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">

</head>

<body>
    <!--引入导航栏-->
    <div th:include="/common/head :: top"></div>

    <div style="clear: both;"></div>
    <!-- 修改个人信息 -->
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group categoryForm">
                        <span class="head">
                            <img id="photo" th:src="@{${user.userProfilePhoto}}"
                                 ondblclick="chooseImageFile('updatePicture')"
                                 th:value="${user.userProfilePhoto}" >
                        </span>


                        <form action="/upload" method="post" enctype="multipart/form-data">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href="javascript:;" class="file">
                                <!--<input type="file" name="file">选择图片-->
                                <input type="submit">上传图片
                                <input th:type="file" name="file" id="updatePicture" th:value="${user.userProfilePhoto}"
                                       hidden accept="image/*" onchange="showImgToView('updatePicture')"/>
                            </a>
                            <!--<button style="float: right" class="btn btn-outline-dark" type="submit">上传</button>-->
                        </form><br>
                        <p style="color: red;font-size: 16px;" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
                        <hr style="border-bottom: 3px rgb(231, 231, 231) solid;"/><br>
                        <label>昵称：</label>
                        <label>[[${user.userName}]]</label><br><br>
                        <label>年龄：</label>
                        <input type="text" id="age" th:value="${user.userAge}"/><br><br>
                        <label>邮箱：</label>
                        <input id="email" type="email" th:value="${user.userEmail}"/><br><br>
                        <label>手机号：</label>
                        <input type="text" id="telephone" th:value="${user.userTelephoneNumber}"/><br><br>
                        <label>个人介绍：</label>
                        <input  type="text" id="introduction" th:value="${user.userIntroduction}"/><br><br>
                        <a style="font-size: 18px;" th:href="@{'/settings/setpass'}">修改密码</a><br><br>
                        <hr style="border-bottom: 3px rgb(231, 231, 231) solid;"/>
                        <div style="text-align: center;">
                            <button class="btn btn-outline-dark" id="updateBtn">修改</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>




    <!--引入底部栏-->
    <div th:include="/common/foot :: foot"></div>
</body>
    <script th:src="@{/js/myJs/settings.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.js}"></script>
    <script th:src="@{/toastr/toastr.min.js}"></script>

    <script type="text/javascript">
        // 打开file表单，选择图片
        function chooseImageFile(inputFileID){
            $("#" + inputFileID).click();
        }

        //创建FileReader对象
        var fileReader = new FileReader();

        //file表单改变事件,将选择的图片显示到img元素
        function showImgToView(inputFileId){
            regexImageFile=/^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
            //选择图片文件
            var imgFile = $("#" + inputFileId).get(0).files[0];
            //判断上传文件是否为图片格式
            if(!regexImageFile.test(imgFile.type)){
                toastr.success("请上传图片类型的文件");
                return;
            }else{
                //将文件读取为DataURL
                fileReader.readAsDataURL(imgFile);
            }
        }

        //读取文件
        fileReader.onload = function (evt) {
            //将该URL绑定到img标签的src属性上,就可以实现图片的上传预览效果了
            $("#photo").attr("src",evt.target.result);
        };

        // 更新用户按钮点击事件
        $('#updateBtn').click(function () {
            var age = $("#age").val();
            var email = $("#email").val();
            var phone = $("#telephone").val();
            var introduction = $("#introduction").val();

            if((phone.valueOf().length > 0) && !(/^1[3456789]\d{9}$/.test(phone))){
                toastr.success("手机号格式有误，请重新填写");
                return false;
            }
            var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            if((email.valueOf().length > 0) && !reg.test(email)){
                toastr.success("邮箱格式不正确，请重新输入");
                return false;
            }

            var user = {
                userAge: age,
                userEmail: email,
                userTelephoneNumber: phone,
                userIntroduction: introduction
            };
            $.ajax({
                type: "PUT",
                url: "http://localhost:8081/user/settings",
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(user),
                success: function (result) {
                    toastr.success(result.message);
                    setTimeout(function() {
                        window.location.reload();
                    }, 2000)
                },
                error: function () {
                    location.reload();
                }
            });
        });

    </script>

</html>